<template>
  <div>
    <h2>Home</h2>
    <div>
      <button @click="$router.back()">回退</button>
      <button @click="$router.forward()">前进</button>
      <button @click="$router.go(-2)">回退2</button>
    </div>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toPlay">娱乐</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    toNews() {
      //push接受的第一个参数是一个字符串地址
      const re = this.$router.push("/home/news");
      console.log(re);
      re.catch(() => {});
    },
    toMusic() {
      //push接受的第二个参数可以是一个地址的描述对象
      // push报错的两种处理方法.如果push书写了回调函数,则push不能再返回promise了
      const re = this.$router.push(
        {
          path: "/home/music",
        },
        null,
        () => {}
      );
      console.log(re);
    },
    toPlay() {
      this.$router.push({
        name: "play",
      });
    },
  },
};
</script>

<style scoped></style>
